<template>
  <el-row
      type="flex"
      align="middle"
      justify="center"
      style="width:100vw; height: 100vh; background-color:#f1f1f1;">
    <el-row
        type="flex"
        justify="space-between"
        style="width: 70vw; height: 70vh;">

      <el-col :span="12" style="display: flex;align-items: center;justify-content: center;">
        <div style="width: 100%;height: 100%;border-radius: 20px 0 0 20px;background-color:#566149;">
          <img
              src="../assets/swapper/jhk-1746198770845.png"
              alt="login"
              style="object-fit: cover;border-radius: 20px 0 0 20px;">
        </div>
      </el-col>

      <el-col
          :span="12"
          style="display: flex;">
        <el-card
            shadow="never"
            style="
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: 0 20px 20px 0;">
          <h2 style="text-align: center;color: #566149;line-height: 3;">注册</h2>
          <el-form :model="registerForm"
                   ref="registerForm"
                   :hide-required-asterisk="true"
                   label-width="100px"
                   style="margin-right: 100px;">
            <el-form-item label="账号" prop="account" :rules="[{ required: true, message: '账号不能为空' }]">
              <el-input v-model.number="registerForm.account" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="name" :rules="[{ required: true, message: '用户名不能为空' }]">
              <el-input v-model="registerForm.name" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '密码不能为空' }]">
              <el-input show-password v-model="registerForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="again" :rules="[{ required: true, message: '确认密码不能为空' }]">
              <el-input show-password v-model="registerForm.again" placeholder="请输入确认密码"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code" :rules="[{ required: true, message: '验证码不能为空' }]">
              <el-row>
                <el-col :span="12">
                  <el-input v-model="registerForm.code" placeholder="请输入验证码"></el-input>
                </el-col>
                <el-col :span="12">
                  <img :src="codeSrc" alt=" " @click="getCode" style="cursor: pointer;height: 40px;">
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 100%;" type="primary" @click="submitForm('registerForm')">提交</el-button>
            </el-form-item>
            <!-- <el-form-item>-->
            <!--   <el-button style="width: 100%;" @click="resetForm('registerForm')">重置</el-button>-->
            <!-- </el-form-item>-->
            <span style="float: left;transform:translateY(-15px);margin-left: 100px;">
          <el-link @click="toLogin">已有账号？前往登录</el-link>
        </span>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </el-row>
</template>


<script>
import api from "@/api";

export default {
  data() {
    return {
      registerForm: {
        account: '',
        name: '',
        password: '',
        again: '',
        code: '',
      },
      codeSrc: ''
    };
  },
  mounted() {
    this.getCode()
  },
  methods: {
    toLogin() {
      this.$router.push('/');
    },
    getCode() {
      api.file.generateImageCode().then((res) => {
        const blob = new Blob([res.data], {type: 'image/png'});
        this.codeSrc = URL.createObjectURL(blob);
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.register();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    register() {
      if (this.registerForm.password.length < 6) {
        this.$message.error('密码不能少于6位');
        return;
      }
      if (this.registerForm.password !== this.registerForm.again) {
        this.$message.error('两次输入的密码不一致');
        return;
      }
      api.user.userRegister(this.registerForm.account, this.registerForm.password, this.registerForm.name, this.registerForm.code).then((res) => {
        let {code, data, message} = res.data
        console.log(data);
        this.$message({type: code === 200 ? 'success' : 'error', message: message, duration: 1000})
        if (code === 200) {
          this.$router.push("/")
        }
      })
    }
  }
}
</script>